<template>
    <div style="user-select: none;">
      <h1>P155 - vue3生命周期</h1>
      <div>
        <h4 @click="num++">{{ num }}</h4>
      </div>
    </div>
  </template> 
          
    <script>
  import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from "vue";
  export default {
    name: "App",
    setup(props, context) {
        let num = ref(0);
        console.log('------setup------')


        // 组合式api的方式来使用vue3的声明周期，其实就是在vue2中的生命周期的名字前面加个on，不过注意，setup函数本身就是在beforeCreate之前执行的。而且组合式api提供的生命周期方法中，没有onBeforeCreate和onCreated这两个方法，而且beforeDestory和destoryed是被替换成了onBeforeUnmount和onUnmount。这些方法里都是传入一个回调函数来使用。不过如果你用不习惯的话，vue2中的生命周期钩子函数在vue3中依然是可以用的。所以你可以选择使用组合式api还是钩子函数。甚至你可以混用，但是我们极度不建议你这样做
        onBeforeMount(()=>{
            console.log('------onBeforeMount------')
        })

        onMounted(()=>{
            console.log('------onMounted------')
        })

        onBeforeUpdate(()=>{
            console.log('------onBeforeUpdate------')
        })

        onUpdated(()=>{
            console.log('------onUpdated------')
        })

        onBeforeUnmount(()=>{
            console.log('------onBeforeUnmount------')
        })

        onUnmounted(()=>{
            console.log('------onUnmounted------')
        })


        return {
            num
        }

    },
  };
  </script>
          
  <style>
  .zhedie {
    height: 15px;
    overflow: hidden;
  }
  </style>
          